<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width">
		<link rel="stylesheet" href="css/swiper.min.css">
		<style>
		
			body {
				margin: 0;
				padding: 0;
			}

			.swiper-container {
				width: 100%;
				margin: 20px auto;
			}

			/* 用text-align:center和line-height=外容器height也可达到横竖居中 */
			.swiper-slide {
				/* text-align: center; */
				background-color: #ccc;
				/* line-height: 300px; */
				display: flex;
				justify-content: center;
				align-items: center;
				height:200px;
			}

			.swiper-slide:nth-child(2n) {
				width: 60%;
			}

			.swiper-slide:nth-child(3n) {
				width: 40%;
			}
		</style>
	</head>
	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">第1页</div>
				<div class="swiper-slide">第2页</div>
				<div class="swiper-slide">第3页</div>
				<div class="swiper-slide">第4页</div>
				<div class="swiper-slide">第5页</div>
				<div class="swiper-slide">第6页</div>
				<div class="swiper-slide">第7页</div>
				<div class="swiper-slide">第8页</div>
				<div class="swiper-slide">第9页</div>
				<div class="swiper-slide">第10页</div>
			</div>
			<!-- 轮播图下面的切换按钮  class名可以是任意名字-->
			<div class="swiper-pagination"></div>
		</div>
		<script src="js/swiper.min.js"></script>
		<script>
			var swiper = new Swiper(".swiper-container",{
				pagination:".swiper-pagination",  
				paginationClickable:true, //切换按钮是否支持点击
				//direction:"vertical",  //按钮的排列方向从上往下
				spaceBetween:20,   //每个滑块之间的距离      
				slidesPerView:3,   //一个网页同时显示的滑块数量
				
				// centeredSlides:true, //第一个滑块在中间而不是最右
				freeMode:true, //给滑动加惯性  false是移动多少滑动多少
			    slidesPerColumn:2, //容器高度固定太小会影响显示  可不设给滑块设高度
				//多行轮播图只是图片分行  轮播效果还是上下整体滑动 
			});
		</script>
	</body>
</html>
